<template>
  <div>
    <div class="icon-back" @click="tologin">
      <van-icon size="25" name="arrow-left" />
    </div>
    <div>
      <p>注册</p>
    </div>
    <van-form>
      <van-cell-group>
        <van-field
            v-model="form.username"
            label="手机号码"
            placeholder="手机号码"
            type="tel"
            clearable
            maxlength="11"
            @input="onPhoneChange"
        />
        <van-field
            v-model="form.sms_code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary" @click.prevent="sendSmsCode" :disabled="isSmsSend">{{ sendBtnText }}</van-button>
          </template>
        </van-field>
        <van-field
            v-model="password"
            required
            type="password"
            label="密码"
            placeholder="请输入密码"
        />
        <van-field
            v-model="password1"
            required
            type="password"
            label="确认密码"
            placeholder="请再次输入密码"
        />
      </van-cell-group>
      <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="选择地区"
          placeholder="点击选择城市"
          @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
        />
      </van-popup>
    </van-form>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit" @click="onsubmit">注册</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      form: {
        username: '',
        sms_code: ''
      },
      // 是否已经发送了验证码
      isSmsSend: false,
      sendBtnText: '点击发送验证码',
      timer: null,
      counter: 60,
      phone:'',
      sms:'',
      password:'',
      password1:'',
      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      value: '',
      columns: ["城中区", "鱼峰区", "柳南区", "柳北区", "柳江区"],
      showPicker: false,
    };
  },
  methods: {

    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    /**
     * 重置倒计时
     */
    reset () {
      this.isSmsSend = false
      this.sendBtnText = '点击发送验证码'
      if (this.timer) {
        clearInterval(this.timer)
        this.counter = 60
        this.timer = null
      }
    },
    /**
     * 倒计时
     */
    countDown () {
      this.timer = setInterval(() => {
        this.sendBtnText = `(${this.counter}秒)后重新发送`
        this.counter--
        if (this.counter < 0) {
          this.reset()
        }
      }, 1000)
    },
    /**
     * 发送验证码
     */
    sendSmsCode () {
      // 判断手机号是否已经输入
      if (!this.form.username) {
        this.$notify('请输入手机号')
        return false
      }
      // 判断手机号是否符合要求
      if (this.form.username.length !== 11) {
        this.$notify('请输入11位手机号')
        return false
      }
      // 调用接口，发送短信验证码
      this.isSmsSend = true
      // 开始倒计时，60s之后才能再次点击
      this.countDown()
    },
    // 当手机号变化时，重置发送按钮
    onPhoneChange () {
      this.reset()
    },
    tologin(){
      this.$router.go(-1);
    },
    onsubmit(){
      if(this.phone==""||this.sms==""||this.password==""||this.password1==""){
        Toast('注册失败！信息未完善');
      }
      else if(this.password!=this.password1){
        Toast('密码输入两次不一致！');
      }
      else{
        Toast.success('注册成功');
        this.$notify({
          type: "success",
          message: "注册成功，3s后返回登录",
          duration: 3000,
        });
        setTimeout(() => {
          sessionStorage.clear("regis");
          this.$router.go(-1);
        }, 3000);
      }
    }
  },
};
</script>

<style scoped>
.icon-back{
  position: absolute;
  left: 2px;
  top:15px
}
</style>

